<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/huteacher.css">
    <link  rel="stylesheet"  href="css/head.css">
    <link rel="stylesheet"  href="css/swiper.min.css">
    <link rel="stylesheet"  href="css/fudong.css">
</head>
<body>

<div  class="head"></div>
<div class="fudongd"></div>
<div  id="hucontain">
    <div>
        <div class="dan" v-for="item in lists"  @click="toxqhuteacher">
            <div><img  :src="item.src" /></div>
            <div>
                <span>{{item.name}}</span>
                <span>{{item.zhicheng}}</span>
            </div>
            <div> {{item.miao}}</div>
        </div>

        <div  class="pagesdd">
            <div class="page"  v-show="show">
                <div class="pagelist">
                    <span class="jump" v-show="current_page>1" @click="current_page--">上一页</span>
                    <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
                    <span class="ellipsis"  v-show="efont">...</span>
                    <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}</span>
                    <span class="ellipsis"  v-show="efont&&current_page<pages-4">...</span>
                    <span class="jump" @click="current_page++">下一页</span>
                    <span v-show="current_page<pages-1" class="jump" class="jump" @click="jumpPage(pages)">{{pages}}</span>
                    <span class="jumppoint">跳转到：</span>
                    <span class="jumpinp"><input type="text" v-model="changePage"  /></span>
                    <span class="jump gobtn" @click="jumpPage(changePage)">GO</span>
                </div>
            </div>
        </div>
    </div>
</div>



<div  class="dibussss"></div>
</body>
<script  src="js/jquery.3.3.1.min.js"></script>
<script src="js/swiper.min.js"></script>
<script  src="js/vue.js"></script>
<script  type="text/javascript">

    $(document).ready(function () {
        $(".head").load("head.html")
        $(".fudongd").load("fudong.html")
        $(".dibussss").load("dibu.html")
    })

    new Vue({
        el:"#hucontain",
        data:{
            current_page: 1, //当前页
            pages: 50, //总页数
            changePage:'',//跳转页
            nowIndex:0,
            lists:[
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",name:"陈飞宇",zhicheng:"博知堂高级教师",miao:"从事数学教学多年，功底扎实，逻辑思维严密，重点突出，热爱教育，风趣幽默的..."},
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",name:"陈飞宇",zhicheng:"博知堂高级教师",miao:"从事数学教学多年，功底扎实，逻辑思维严密，重点突出，热爱教育，风趣幽默的..."},
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",name:"陈飞宇",zhicheng:"博知堂高级教师",miao:"从事数学教学多年，功底扎实，逻辑思维严密，重点突出，热爱教育，风趣幽默的..."},
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",name:"陈飞宇",zhicheng:"博知堂高级教师",miao:"从事数学教学多年，功底扎实，逻辑思维严密，重点突出，热爱教育，风趣幽默的..."},
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",name:"陈飞宇",zhicheng:"博知堂高级教师",miao:"从事数学教学多年，功底扎实，逻辑思维严密，重点突出，热爱教育，风趣幽默的..."},
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",name:"陈飞宇",zhicheng:"博知堂高级教师",miao:"从事数学教学多年，功底扎实，逻辑思维严密，重点突出，热爱教育，风趣幽默的..."},
            ]
        },
        methods:{
            jumpPage: function(id) {    // 分页
                this.current_page = id;
            },
            toxqhuteacher:function () {
                window.open("xqhuteacher.html")
            }
        },
        computed: {
            show: function () {
                return this.pages && this.pages != 1
            },
            efont: function () {
                if (this.pages <= 7) return false;
                return this.current_page > 5
            },
            indexs: function () {
                var left = 1,
                    right = this.pages,
                    ar = [];
                if (this.pages >= 7) {
                    if (this.current_page > 5 && this.current_page < this.pages - 4) {
                        left = Number(this.current_page) - 3;
                        right = Number(this.current_page) + 3;
                    } else {
                        if (this.current_page <= 5) {
                            left = 1;
                            right = 7;
                        } else {
                            right = this.pages;
                            left = this.pages - 6;
                        }
                    }
                }
                while (left <= right) {
                    ar.push(left);
                    left++;
                }
                return ar;
            },
        },


    })


</script>
</html>